<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>患者面板 - 智能医疗系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Vue.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <!-- 使用 BootCDN（国内加速） -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.5/axios.min.js"></script>
    <!-- 日期选择 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
</head>
<body class="bg-light">
<div id="app" class="container mt-5">
    <h2 class="text-center mb-4">患者面板</h2>
    <div class="mb-3 text-end">
        <a href="/logout" class="btn btn-secondary">注销</a>
    </div>

    <!-- 预约医生部分 -->
    <div class="card mb-4">
        <div class="card-header">预约医生</div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <label>选择科室</label>
                    <select v-model="selectedDepartment" @change="fetchSchedules" class="form-select">
                        <option value="">请选择科室</option>
                        <option v-for="dept in departments" :value="dept.id">{{ dept.name }}</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label>选择日期</label>
                    <input type="date" v-model="selectedDate" class="form-control" @change="fetchSchedules">
                </div>
            </div>

            <div v-if="schedules.length > 0" class="mt-3">
                <h5>可选排班：</h5>
                <div v-for="schedule in schedules" :key="schedule.id" class="card mb-2">
                    <div class="card-body">
                        <h5>{{ schedule.doctor.name }} 医生</h5>
                        <p>日期：{{ schedule.scheduleDate }} {{ schedule.timeSlot }}</p>
                        <button @click="bookAppointment(schedule.id)" class="btn btn-primary">立即预约</button>
                    </div>
                </div>
            </div>
            <div v-else class="alert alert-warning mt-3">
                当前条件下无可用排班
            </div>
        </div>
    </div>

    <!-- 我的预约记录 -->
    <div class="card mb-4">
        <div class="card-header">我的预约记录</div>
        <div class="card-body">
            <button @click="fetchAppointments" class="btn btn-info mb-3">刷新记录</button>
            <div v-for="app in appointments" :key="app.id" class="card mb-3">
                <div class="card-body">
                    <h5>预约号：{{ app.id }}</h5>
                    <p>状态：{{ app.status }}</p>
                    <p>医生：{{ app.doctor.name }}</p>
                    <p>时间：{{ app.schedule.scheduleDate }} {{ app.schedule.timeSlot }}</p>
                    <div v-if="app.medicalRecord">
                        <a :href="'/diagnosis.html?appointmentId=' + app.id" class="btn btn-success">查看诊断</a>
                        <button v-if="app.medicalRecord.prescription" @click="showMedicines = true"
                                class="btn btn-warning">购买药品</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 药品购买弹窗 -->
    <div v-if="showMedicines" class="modal" style="display: block; background: rgba(0,0,0,0.5)">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5>选择药品</h5>
                    <button @click="showMedicines = false" class="btn-close"></button>
                </div>
                <div class="modal-body">
                    <div v-for="med in medicines" :key="med.id" class="mb-3">
                        <label>
                            <input type="checkbox" v-model="selectedMeds" :value="med.id"
                                   :disabled="med.stock < 1">
                            {{ med.name }} (库存: {{ med.stock }})
                        </label>
                    </div>
                    <button @click="purchaseMedicines" class="btn btn-primary">确认购买</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 消息中心 -->
    <div class="card mb-4">
        <div class="card-header">
            消息中心（未读消息：{{ unreadMessages }}）
            <button @click="fetchMessages" class="btn btn-sm btn-info">刷新</button>
        </div>
        <div class="card-body">
            <div v-for="msg in messages" :key="msg.id"
                 :class="['alert', msg.isRead ? 'alert-secondary' : 'alert-primary']">
                <p>{{ msg.content }}</p>
                <small>{{ msg.createdAt }}</small>
            </div>
        </div>
    </div>

    <!-- 留言板 -->
    <div class="card mb-4">
        <div class="card-header">留言板</div>
        <div class="card-body">
            <textarea v-model="newComment" class="form-control mb-3" placeholder="请输入留言"></textarea>
            <button @click="submitComment" class="btn btn-success">提交留言</button>

            <div v-for="comment in comments" :key="comment.id" class="mt-3 p-2 border">
                <p>{{ comment.content }}</p>
                <div v-if="comment.reply" class="bg-light p-2">
                    <strong>管理员回复：</strong>{{ comment.reply }}
                </div>
                <small>{{ comment.createdAt }}</small>
            </div>
        </div>
    </div>

    <!-- 我的背包 -->
    <div class="card">
        <div class="card-header">我的药品</div>
        <div class="card-body">
            <div v-if="myMedicines.length === 0" class="alert alert-info">
                当前没有药品
            </div>
            <div v-else>
                <div v-for="item in myMedicines" :key="item.id" class="d-flex justify-content-between mb-2">
                    <span>{{ item.medicine.name }} x{{ item.quantity }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            // 预约相关
            departments: [],
            selectedDepartment: '',
            selectedDate: new Date().toISOString().slice(0,10),
            schedules: [],
            appointments: [],

            // 药品相关
            medicines: [],
            selectedMeds: [],
            showMedicines: false,
            myMedicines: [],

            // 消息相关
            messages: [],
            unreadMessages: 0,

            // 留言相关
            comments: [],
            newComment: ''
        },
        mounted() {
            this.fetchDepartments();
            this.fetchAppointments();
            this.fetchMedicines();
            this.fetchMessages();
            this.fetchComments();
            this.fetchMyMedicines();
        },
        methods: {
            // 获取科室列表
            fetchDepartments() {
                axios.get('/patient/departments').then(res => {
                    this.departments = res.data;
                });
            },

            // 获取排班信息
            fetchSchedules() {
                if(!this.selectedDepartment || !this.selectedDate) return;
                axios.get(`/patient/schedules?departmentId=${this.selectedDepartment}&date=${this.selectedDate}`)
                    .then(res => this.schedules = res.data);
            },

            // 创建预约
            bookAppointment(scheduleId) {
                axios.post('/patient/appointments', { scheduleId })
                    .then(() => {
                        alert('预约成功！');
                        this.fetchAppointments();
                    });
            },

            // 获取预约记录
            fetchAppointments() {
                axios.get('/patient/appointments').then(res => {
                    this.appointments = res.data;
                });
            },

            // 获取药品列表
            fetchMedicines() {
                axios.get('/medicine').then(res => this.medicines = res.data);
            },

            // 购买药品
            purchaseMedicines() {
                if(this.selectedMeds.length === 0) return;
                axios.post('/medicine/purchase', { medicineIds: this.selectedMeds })
                    .then(() => {
                        alert('购买成功！');
                        this.showMedicines = false;
                        this.fetchMedicines();
                        this.fetchMyMedicines();
                    });
            },

            // 获取消息
            fetchMessages() {
                axios.get('/patient/messages').then(res => {
                    this.messages = res.data;
                    this.unreadMessages = res.data.filter(m => !m.isRead).length;
                });
            },

            // 提交留言
            submitComment() {
                if(!this.newComment) return;
                axios.post('/patient/comments', { content: this.newComment })
                    .then(() => {
                        this.newComment = '';
                        this.fetchComments().catch(error => {
                            console.error('提交留言失败:', error);
                            // 可添加用户通知或其他错误处理逻辑
                    });
            },

            // 获取留言
            fetchComments() {
                axios.get('/patient/comments').then(res => this.comments = res.data);
            },

            // 获取我的药品
            fetchMyMedicines() {
                axios.get('/patient/medicines').then(res => this.myMedicines = res.data);
            }
        }
    });
</script>
</body>
</html>